// 在线引入的Js资源
//2.懒加载
// import 'https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js'


// 本地引入的Js资源
import "https://code.jquery.com/jquery-3.6.0.js"
// import { lazyload } from './jquery.lazyload.js'
import './jquery.pagination.js'
// import { $ } from './jquery.js'

class dataList {
    constructor() {
    }
    init() {
        //列表渲染以及商品的排序，分页
        this.dataRender()

        //回退页面
        this.backPage()
    }

    dataRender() {
        let dataUrl = 'http://127.0.0.1/SAMSUNGproject/backend/dataList.php'
        function dataRender(datalist) {
            let str = ''
            $.each(datalist, (index, element) => {
                // data-original=
                str += `
               <div class="data_item">
                <div class="data_header">
                    <span>新品</span>
                    <span>免息</span>
                    <span>买赠</span>
                    <span>以旧换新</span>
                </div>
                <div class="data_item_container">
                    <div class="data_item_img" >
                        <img class="lazyload" src="${element.url}" alt="">
                    </div>
                <div class="data_item_name">${element.title}</div>
                    <div class="data_item_money">￥${element.price}</div>
                    <div class="data_item_tz"><input type="button" sid="${element.sid}" value="查看更多">  </div>
                </div>
                </div>
                
                `
            })
            $('.data_Content_item').html(str)
        }
        //获取数据进行渲染页面列表
        $.ajax({
            url: dataUrl,
            method: 'get',
            dataType: 'json',
        }).then((result) => {
            let datalist = result.pagecontent
            dataRender(datalist)

            // 懒加载过程
            // $('img.lazyload').lazyload({
            //     effect: 'fadeIn' //fadeIn  slideDown
            // });

            // 分页排序，
            $('.page').pagination({
                pageCount: result.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '尾页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function (index) {
                    console.log(index.getCurrent())
                    $.ajax({
                        method: 'get',
                        url: dataUrl,
                        data: {
                            page: index.getCurrent()
                        },
                        dataType: 'json'
                    }).then((result) => {
                        let datalist = result.pagecontent
                        dataRender(datalist)

                        //懒加载过程
                        // $('img.lazyload').lazyload({
                        //     effect: 'fadeIn' //fadeIn  slideDown
                        // });
                    })
                }
            });
            //排序
            //点击发送ajax请求进行排序当前第一页
            let sort = null
            let num = 0
            $('.jgpx').on('click', function () {
                //判断正负数来改变升序降序排列
                num++
                if (num % 2 !== 0) {
                    sort = 'asc'
                    $('.jgpxL span').eq(0).css({
                        borderBottomColor: '#333'
                    })
                    $('.jgpxL span').eq(1).css({
                        borderTopColor: ' #d8d8d8'
                    })
                }
                else {
                    //排列以后改变页面button样式
                    sort = 'desc'
                    $('.jgpxL span').eq(0).css({
                        borderBottomColor: '#d8d8d8'
                    })
                    $('.jgpxL span').eq(1).css({
                        borderTopColor: ' #333'
                    })
                }
                //发送ajax拿到分页数据进行渲染
                $.ajax({
                    method: 'get',
                    url: dataUrl,
                    data: {
                        page: 1,
                        sort: sort
                    },
                    dataType: 'json'
                }).then((result) => {
                    console.log(result);
                    let datalist = result.pagecontent
                    dataRender(datalist)
                    // $('img.lazyload').lazyload({
                    //     effect: 'fadeIn' //fadeIn  slideDown
                    // });



                    let obj = $('.data_Content_item .data_item').find('.data_item_container')
                    let sid = $('.data_Content_item .data_item').find('.data_item_container').find('.data_item_tz input').attr('sid')

                    $('.data_Content_item .data_item').find('.data_item_container').find('.data_item_tz').on('click', function () {
                        Gdxq(obj, sid)
                    })

                    // console.log($('.data_Content_item .data_item').find('.data_item_container').find('.data_item_tz input').attr('sid'));
                })
            })
            $('.page').pagination({
                pageCount: result.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '尾页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function (index) {
                    $.ajax({
                        method: 'get',
                        url: dataUrl,
                        data: {
                            page: index.getCurrent(),
                            sort: sort
                        },
                        dataType: 'json'
                    }).then((result) => {
                        let datalist = result.pagecontent
                        dataRender(datalist)

                        //懒加载过程
                        // $('img.lazyload').lazyload({
                        //     effect: 'fadeIn' //fadeIn  slideDown
                        // });


                        let obj = $('.data_Content_item .data_item').find('.data_item_container')
                        let sid = $('.data_Content_item .data_item').find('.data_item_container').find('.data_item_tz input').attr('sid')

                        $('.data_Content_item .data_item').find('.data_item_container').find('.data_item_tz').on('click', function () {
                            Gdxq(obj, sid)
                        })
                    })
                }
            });
            //默认根据数据库提供数据的sid进行排序
            $('.labels').on('click', function () {
                $.ajax({
                    url: dataUrl,
                    method: 'get',
                    dataType: 'json',
                }).then((result) => {
                    let datalist = result.pagecontent
                    dataRender(datalist)
                    //懒加载过程
                    // $('img.lazyload').lazyload({
                    //     effect: 'fadeIn' //fadeIn  slideDown
                    // });
                    let obj = $('.data_Content_item .data_item').find('.data_item_container')
                    let sid = $('.data_Content_item .data_item').find('.data_item_container').find('.data_item_tz input').attr('sid')

                    $('.data_Content_item .data_item').find('.data_item_container').find('.data_item_tz').on('click', function () {
                        Gdxq(obj, sid)
                    })

                })
            })
            //根据关键字搜索排序
            $('.condition_button label').on('click', function () {
                $(this).addClass('active').siblings().removeClass('active')

            })
            //点击进入相应的detail页面

            function Gdxq(obj, id) {
                obj.on('click', '.data_item_tz input', function () {
                    // console.log($(this));
                    //获取当前点击之后指定的sid唯一值，传递给后端获取对应的数据进行渲染到detail页面中进行渲染。
                    // let dataDom = $(this).attr('sid')
                    //跳转页面添加参数。
                    location.href = `http://127.0.0.1/SAMSUNGproject/frontend/detail.html?sid=${id}`
                })
            }

            $('.data_Content_item .data_item').find('.data_item_container').on('click', '.data_item_tz input', function () {
                // console.log($(this));
                //获取当前点击之后指定的sid唯一值，传递给后端获取对应的数据进行渲染到detail页面中进行渲染。
                let dataDom = $(this).attr('sid')
                //跳转页面添加参数。
                location.href = `http://127.0.0.1/SAMSUNGproject/frontend/detail.html?sid=${dataDom}`
            })

        })
    }
    //回退页面
    backPage() {
        // console.log(location.href);
        let herf = location.href.substring(0, location.href.indexOf('?'))
        // console.log(herf);
        let search = location.search.substring(1)//获取的文字进行编码了
        // console.log(decodeURI(search));//解码
        search = decodeURI(search)
        let str = `
        <i class="iconfont icon-113fangxiang_xiangyou"></i>
        <a href="${herf}?${search}" style="color:#2189ff;">${search}</a>
        `
        $('.back_left').append(str)


    }


}
export {
    dataList
}